<template>
    <div>
        <hd-tab :tabs="tabs"/>
        <el-table :data=wechats border stripe>
            <el-table-column v-for="col in columns" :prop="col.id" :key="col.id" :label="col.label" :width="col.width"
                             #default="{row:wechat}">
                <div v-if="col.id=='qr'">
                    <el-popover
                            placement="top-start"
                            title="扫码关注公众号"
                            width="140"
                            trigger="hover"
                    >
                        <!--                        这里是编写弹出层的样式-->
                        <el-image :src="wechat.qr" fit="fill"></el-image>
                        <!--                        这里是原始的宽高-->
                        <el-image slot="reference" :src="wechat.qr" fit="fill" class="w-10 h-10"></el-image>
                    </el-popover>
                </div>
                <div v-else>
                    {{wechat[col.id]}}
                </div>
            </el-table-column>
            <el-table-column #default="{row:wechat}" width="270" label="接口地址">
                {{`${site.domain}/wechat/api/${sid}/${wechat.id}`}}
            </el-table-column>
            <el-table-column
                    #default="{row:wechat}"
                    width="200"
                    label="操作"
            >
                <el-button-group>
                    <el-button type="success" size="small" @click="router('wechat.wechat.edit',{sid,id:wechat.id})">
                        编辑
                    </el-button>
                    <el-button type="danger" size="small" @click="del(wechat)">删除</el-button>
                </el-button-group>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import tabs from './tabs'

    const columns = [
        {label: '编号', id: 'id', width: 80},
        {label: '公众号名称', id: 'title', width: 100},
        {label: '类型', id: 'type'},
        {label: '微信号', id: 'name'},
        {label: '介绍', id: 'introduce'},
        {label: '二维码', id: 'qr', width: 120},
        {label: 'appid', id: 'appid'},
    ]
    export default {
        route: {path: `:sid/wechat/index`},
        data() {
            return {
                tabs: tabs(this.$route.params.sid),
                columns,
                wechats: [],
                sid: this.$route.params.sid,
                site:{}
            };
        },
        async created() {
            this.site=await this.axios.get(`site/${this.sid}`)
            this.wechats = await this.axios.get(`site/${this.sid}/wechat`);
        },
        methods: {
            async del(wechat) {
                this.$confirm(`确定删除【${wechat.title}】微信吗？`, "温馨提示").then(
                    async () => {
                        await this.axios.delete(`site/${this.sid}/wechat/${wechat.id}`);
                        this.wechats.splice(this.wechats.indexOf(wechat), 1);
                    }
                );
            },
            async edit(wechat) {
                await this.axios(`wechat/${this.sid}/wechat/${this.wechat.id}`)
            }
        }
    }
</script>

<style scoped>

</style>

